<template>
  <view class="recipe-goods-items">
    <image :src="item.pic"></image>
    <!-- 如果是套餐商品 -->
    <view class="goods-info bottom-border" v-if="item.type == 'package_goods'">
      <view class="goods-name">{{ item.name }}</view>
      <view :class="{ 'item-end': hasMoreDetails }">
        <view class="goods-details">
          <view class="goods-price">￥{{ item.order_amount }}</view>
          <view
            class="goods-package_goods"
            v-for="goods in packageGoodsList"
            :key="goods.goods_spu_id"
          >
            {{ `${goods.goods_name} ${goods.num}${goods.unit}` }}
          </view>
        </view>
        <!-- 显示更多箭头，仅当商品数量大于2个时展示 -->
        <u-icon
          :name="item.is_select ? 'arrow-up' : 'arrow-down'"
          v-if="hasMoreDetails"
          @click="toggleSelection"
        ></u-icon>
      </view>
    </view>
    <!-- 如果是单一商品 -->
    <view class="goods-info bottom-border" v-if="item.type == 'goods'">
      <view class="goods-name">{{ item.goods_name }}</view>
      <view class="goods-details">
        <view class="goods-price">￥{{ item.market_price }}</view>
        <view class="goods-unit">{{ `${item.num}${item.unit}` }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
    },
  },
  computed: {
    hasMoreDetails() {
      return this.item.package_goods?.length > 2;
    },
    packageGoodsList() {
      return this.item.is_select
        ? this.item.package_goods
        : this.item.package_goods?.slice(0, 2);
    },
  },
  methods: {
    toggleSelection() {
      this.$emit('toggleSelection',{value:!this.item.is_select,index: this.index});
    },
  },
};
</script>

<style lang="scss" scoped>
.recipe-goods-items {
  display: flex;
  margin-bottom: 30rpx;
  image {
    width: 142rpx;
    height: 142rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
  }
  .goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding-bottom: 30rpx;
    .goods-name {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
      margin-bottom: 50rpx;
    }
    .goods-details {
      font-family: PingFang SC;
      font-weight: bold;
      .goods-price {
        color: #f32d2d;
        font-size: 30rpx;
      }
      .goods-package_goods {
        font-size: 26rpx;
      }
      .goods-unit {
        font-size: 26rpx;
      }
    }
  }
}
.item-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.bottom-border {
  border-bottom: 1px solid #ececec;
}
</style>